import React, { Component } from 'react';
import { StyleSheet, View, Text, Image, TouchableOpacity, Modal, PixelRatio } from 'react-native';
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { orderStyle, commonStyle, commen } from '../_common/style';
import Echarts from 'native-echarts';
import MethodUtil from '../../../../utils/MethodUtil';
import { LieCpt } from './LieCpt';

const scale = GLOBAL.SCALE;
export class TopShowCpt extends Component {
	constructor(props) {
		super(props);
		this.state = {
			isVisible: false
		}
	}

	// 获取Echarts数据
	_getEcharts () {
		let { data } = this.props || {};
		let { imgData } = data || {};
		let option = {
			series: [
				{
					name: 'Echarts',
					type: 'pie',
					radius: ['70%', '90%'],
					label: {
						normal: {
							show: false,
							position: 'center'
						}
					},
					color: ['#61a0a8', '#eee'],
					data: [
						{ value: imgData.small || 0, name: 'small' },
						{ value: imgData.small > 0 ? imgData.big - imgData.small : -1, name: 'big' },
					]
				}
			]
		};
		return option;
	}

	_titleImgCallBack = () => {
		this.setState({
			isVisible: true
		})
	}




	render () {
		let { data } = this.props || {};
		let { listData, imgData, active, leftNone, propsSend } = data || {};
		let titleImgObj = require('../../../../imgs/global/query.png');
		let { isVisible } = this.state;
		console.log('propsSend', data)
		return (
			<View style={commonStyle.row}>

				<View style={styles.echarts}>
					<Text style={styles.wenText}>{imgData.small > 0 ? (MethodUtil.countObj.multiply(MethodUtil.countObj.divide(imgData.small, imgData.big, 4), 100) > 100 ? '100' : MethodUtil.countObj.multiply(MethodUtil.countObj.divide(imgData.small, imgData.big, 2), 100)) : '0'}%</Text>
					<Echarts height={120 * scale} width={120 * scale} option={this._getEcharts()} />
				</View>
				<View style={orderStyle.payLie}>
					{
						listData && listData.map((item, index) => {
							return (
								<View key={index} style={[active ? null : commonStyle.row3, orderStyle.payList]}>
									<Text style={[orderStyle.paylable, item.color ? orderStyle.paylableRed : null, item.style ? item.style : null]}>
										{item.title}
										{!active ? ':' : null}
									</Text>
									<Text style={[leftNone ? '' : orderStyle.paylable2, item.color ? orderStyle.paylableRed : null, item.style ? item.style : null]}>{item.value}</Text>
									{item.icon ? <TouchableOpacity style={{ marginLeft: 5 * scale }} onPress={this._titleImgCallBack} ><Image style={{ width: 15 * scale, height: 15 * scale, }} source={titleImgObj}></Image></TouchableOpacity> : null}
								</View>
							)
						})
					}
				</View>

				<Modal transparent={true} visible={isVisible} animationType={'fade'} onRequestClose={() => { console.log(1) }}>
					<TouchableOpacity activeOpacity={1} style={styles.modalBox} >

					</TouchableOpacity>

					<TouchableOpacity activeOpacity={1} onPress={() => {
						this.setState({
							isVisible: false
						})
					}} style={styles.contianBox}>
						<View style={styles.modalBody}>
							<View style={[styles.head, styles.tabLie]}>
								<Text style={styles.headTitle}>提示</Text>
								<Text style={styles.close}>X</Text>
							</View>
							{
								propsSend && propsSend.orderType == 'S' ? (
									<View style={styles.listBox}>
										<LieCpt iWidth={170} data={{ lable: '订单完成时', value: [['应收金额=实结金额']] }} />
										<LieCpt iWidth={170} data={{ lable: '发货完成时', value: [['应收金额=max（应结金额，实结金额']] }} />
										<LieCpt iWidth={170} data={{ lable: '其他状态', value: [['应收金额=max（下单金额，应结金额，实结金额）']] }} />
										<View style={styles.info}>
											<Text style={styles.infoText}>下单金额=下单量*商品单价（暂定价/一口价)</Text>
											<Text style={styles.infoText}>应结金额=收货量*结算单价（注：未确认结算单价则取暂定价  |  已确认结算价则取结算单价）</Text>
											<Text style={styles.infoText}>实结金额=货款不含税金额+货款税额+折扣不含税金额+折扣税额</Text>
										</View>
									</View>
								) : (
										<View style={styles.listBox}>
											<LieCpt iWidth={170} data={{ lable: '订单完成时', value: [['应付金额=实结金额']] }} />
											<LieCpt iWidth={170} data={{ lable: '收货完成时', value: [['应付金额=max（应结金额，实结金额）']] }} />
											<LieCpt iWidth={170} data={{ lable: '其他状态', value: [['应付金额=max（下单金额，应结金额，实结金额）']] }} />
											<View style={styles.info}>
												<Text style={styles.infoText}>下单金额=下单量*商品单价（暂定价/一口价）</Text>
												<Text style={styles.infoText}>应结金额=收货量*结算单价（注：未确认结算单价则取暂定价  |  已确认结算价则取结算单价）</Text>
												<Text style={styles.infoText}>实结金额=货款不含税金额+货款税额+折扣不含税金额+折扣税额</Text>
											</View>
										</View>
									)
							}

						</View>
					</TouchableOpacity>

				</Modal>

			</View>
		)
	}
}
const styles = StyleSheet.create({
	contianBox: {
		height: '100%',
		width: '100%',
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center'
	},
	tabLie: {

		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: '#E3E7F0',
	},
	head: {
		flexDirection: 'row',
		justifyContent: 'space-between'
	},
	headTitle: {
		fontSize: 16 * scale,
		fontWeight: 'bold'
	},
	listBox: {
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale
	},
	close: {
		fontSize: 16 * scale,
		color: style.color.themeColor
	},
	info: {
		paddingTop: 10 * scale,
		paddingLeft: 20 * scale,
		paddingRight: 20 * scale
	},
	infoText: {
		paddingTop: 8 * scale,
		fontSize: 12 * scale,
		color: '#999'
	},
	wenText: {
		fontSize: 26 * scale,
		color: style.color.font1,
		color: 'red',
		position: 'absolute',
		top: 45 * scale,
		textAlign: 'center',
		width: 120 * scale
	},
	echarts: { width: 120 * scale, height: 120 * scale, position: 'relative' },
	modalBox: {
		backgroundColor: '#000',
		opacity: .3,
		height: '100%',
		width: '100%',
		position: 'absolute',
		left: 0,
		top: 0
	},
	modalBody: {
		...commen.edge,
		backgroundColor: style.color.white,
		width: 320 * scale,
		paddingTop: 15 * scale,
		paddingBottom: 15 * scale,
		borderRadius: 4 * scale,
	},
})